<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#tuo{
				width: 100px;
				height: 100px;
				background: #e54d26;
			}
			#cun{
				width: 540px;
				height: 320px;
				border: 2px solid #d2d2d2;
				box-shadow: 1px 4px 8px #646464;
			}
			img{
				width: 500px;
				height: 280px;
			}

		</style>
	</head>
	<body>
		<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<br />
		<img src="images/off.png" id="tuo" draggable="true" ondragstart="drag(event)"/>

		<script type="text/javascript">
			function allowDrop(ev){
			//不执行默认处理（拒绝被拖放）
//				ev.preventDefault();
			};
			function drag(ev){
				//使用setData(数据类型，携带的数据)
				//方法将要拖放的数据存入dataTransfer对象
				console.log(ev)
				ev.dataTransfer.setData("Text",ev.target.id);
			};
			function drop(ev){
				//不执行默认处理（拒绝被拖放）
				ev.preventDefault();
				//使用getData()获取到数据，然后赋值给data
				var data = ev.dataTransfer.getData("Text");
				//使用appendChild方法把拖动的节点放到元素节点中成为其子节点
				ev.target.appendChild(document.getElementById(data));
			};

		</script>
	</body>
</html>
